<template>
    <div class="zy0506-alert" style="width: 1664px; height: 919px" v-if="show">
        <div class="zy0822-board">
            <div class="borad-lp">
                <p class="zy0822-til1">数据采集</p>
                <div class="gap" style="height: 12px"></div>
                <div class="zy0822-box1" style="height: 338px">
                    <div class="flx1 ac">
                        <p class="zy0822-til2">采集监控</p>
                        <!-- <i class="zy0822-arw"></i> -->
                    </div>

                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="flx1" style="gap: 0 10px">
                        <div class="zy0822-data1">
                            <p class="til">物联感知设备在线率</p>
                            <div class="yy0427-dzbg1">
                                <p class="p1">
                                    <em>{{ cjjkData.iotDeviceOnline.rate }}</em
                                    >%
                                </p>
                            </div>
                            <ul class="zy0822-info">
                                <li>
                                    <p class="p1">监测总数</p>
                                    <p class="p2">{{ cjjkData.iotDeviceOnline.totalMonitoring }}</p>
                                </li>
                                <li>
                                    <p class="p1">在线数</p>
                                    <p class="p2" style="color: #00e87e">
                                        {{ cjjkData.iotDeviceOnline.onlineCount }}
                                    </p>
                                </li>
                            </ul>
                        </div>
                        <div class="zy0822-data1">
                            <p class="til">业务数据正常入库率</p>
                            <div class="yy0427-dzbg1">
                                <p class="p1">
                                    <em>{{ cjjkData.businessDataStorage.normalStorageRate }}</em
                                    >%
                                </p>
                            </div>
                            <ul class="zy0822-info">
                                <li>
                                    <p class="p1">接入总数</p>
                                    <p class="p2">{{ cjjkData.businessDataStorage.totalAccess }}</p>
                                </li>
                                <li>
                                    <p class="p1">正常接入数</p>
                                    <p class="p2" style="color: #00e87e">
                                        {{ cjjkData.businessDataStorage.normalAccessCount }}
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="gap"></div>
                <div class="zy0822-box1" style="height: 240px">
                    <p class="zy0822-til2">预警处置</p>
                    <!-- <div class="gap" style="height: 30px"></div> -->
                    <div class="flx1 ac jc" style="gap: 0 30px">
                        <div class="yy-charbox1" style="width: 250px; height: 200px">
                            <div id="czl" style="width: 100%; height: 100%"></div>
                        </div>
                        <ul class="zy0822-info type2">
                            <li>
                                <p class="p1">预警总数</p>
                                <p class="p2" style="color: #f54455">
                                    {{ yjczData.totalEarlyWarnings || '-' }}
                                </p>
                            </li>
                            <li>
                                <p class="p1">已处理</p>
                                <p class="p2" style="color: #00e87e">
                                    {{ yjczData.disposedEarlyWarnings || '-' }}
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="gap"></div>
                <div class="zy0822-box1" style="height: 240px; position: relative">
                    <p class="zy0822-til2">数据质量评分分布</p>
                    <div id="sjzlpffb" style="width: 100%; height: 100%"></div>
                    <div
                        style="
                            position: absolute;
                            top: 42%;
                            width: 108px;
                            left: 52px;
                            text-align: center;
                        "
                    >
                        <p style="color: #fff; font-size: 20px">平均分</p>
                        <p
                            style="
                                color: #00e87e;
                                font-size: 30px;
                                margin-top: 10px;
                                font-family: 'Oswald';
                            "
                        >
                            {{ sjzlpffb.averageScore ? sjzlpffb.averageScore.toFixed(1) : 0 }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="board-mp">
                <div class="gap" style="height: 32px"></div>
                <div class="zy0427-box1">
                    <p class="zy0427-txt1">数据总量</p>
                    <div class="zy0427-numScroll">
                        <div class="" id="devNum1"></div>
                        <p class="danwei">万条</p>
                    </div>
                    <div class="gap" style="height: 54px"></div>
                    <ul class="zy0427-data1">
                        <li>
                            <p class="p1">生态环境归集</p>
                            <p class="p2">
                                {{ data.sthjgj || '-' }} <span style="right: -10px">万条</span>
                            </p>
                        </li>
                        <li>
                            <p class="p1">市级部门归集</p>
                            <p class="p2">
                                {{ data.sjbmgj || '-' }} <span style="right: -10px">万条</span>
                            </p>
                        </li>
                        <li>
                            <p class="p1">今日新增</p>
                            <p class="p2">{{ jrxz || '-' }} <span style="right: 10px">条</span></p>
                        </li>
                        <!-- <li>
                            <p class="p1">今日存储</p>
                            <p class="p2">1.4 <span>GB</span></p>
                        </li> -->
                        <li>
                            <p class="p1">今日共享</p>
                            <p class="p2">{{ jrgx || '-' }} <span style="right: 10px">条</span></p>
                        </li>
                    </ul>
                </div>
                <div class="gap" style="height: 35px"></div>
                <div class="zy0427-box2 small">
                    <div class="b1">
                        <div class="zy0427-data2">
                            <p class="p1">数据来源</p>
                            <p class="p2">{{ sjly }}<span>个</span></p>
                        </div>
                        <div class="zy0427-donghua1">
                            <p class="p1">地表水</p>
                            <p class="p2">污染源</p>
                            <p class="p3">大气</p>
                            <p class="p4">环境应急</p>

                            <svg width="114" height="44" class="tuoyuan1">
                                <ellipse
                                    cx="57"
                                    cy="22"
                                    rx="55"
                                    ry="20"
                                    fill="none"
                                    stroke-width="2"
                                    stroke="#00ede5"
                                ></ellipse>
                            </svg>
                            <svg width="114" height="44" class="tuoyuan2">
                                <ellipse
                                    cx="57"
                                    cy="22"
                                    rx="55"
                                    ry="20"
                                    fill="none"
                                    stroke-width="2"
                                    stroke="#00ede5"
                                ></ellipse>
                            </svg>
                            <svg width="251px" class="svg-circle" height="113px">
                                <path
                                    fill="none"
                                    stroke="#00ede5"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M125.500,-0.000 C194.812,-0.000 250.1000,25.296 250.1000,56.500 C250.1000,87.704 194.812,113.000 125.500,113.000 C56.188,113.000 0.000,87.704 0.000,56.500 C0.000,25.296 56.188,-0.000 125.500,-0.000 Z"
                                ></path>
                            </svg>
                        </div>
                    </div>

                    <div class="b2">
                        <svg class="zy0427-svg">
                            <image
                                href="./assets/images/svg_dot.png"
                                x="0"
                                y="-3"
                                width="20"
                                height="6"
                            >
                                <animateMotion
                                    path="M0,150 C0,150 59,164 106,152 "
                                    dur="3s"
                                    repeatCount="indefinite"
                                    rotate="auto"
                                ></animateMotion>
                                <animate
                                    attributeName="opacity"
                                    from="0"
                                    to="1"
                                    dur="3s"
                                    repeatCount="indefinite"
                                ></animate>
                            </image>
                            <image
                                href="./assets/images/svg_dot.png"
                                x="0"
                                y="-3"
                                width="20"
                                height="6"
                            >
                                <animateMotion
                                    path="M1,192 C2,195 53,192 106,188"
                                    dur="3s"
                                    repeatCount="indefinite"
                                    rotate="auto"
                                ></animateMotion>
                                <animate
                                    attributeName="opacity"
                                    from="0"
                                    to="1"
                                    dur="3s"
                                    repeatCount="indefinite"
                                ></animate>
                            </image>
                            <image
                                href="./assets/images/svg_dot.png"
                                x="0"
                                y="-3"
                                width="20"
                                height="6"
                            >
                                <animateMotion
                                    path="M1.5,242.5 C1.5,242.5 22,230 101.5,233"
                                    dur="3s"
                                    repeatCount="indefinite"
                                    rotate="auto"
                                ></animateMotion>
                                <animate
                                    attributeName="opacity"
                                    from="0"
                                    to="1"
                                    dur="3s"
                                    repeatCount="indefinite"
                                ></animate>
                            </image>
                        </svg>
                    </div>
                    <div class="b3">
                        <div class="zy0427-data2">
                            <p class="p1">数据存贮</p>
                            <p class="p2">
                                {{ zccl.ZCCL || '-' }} <span>{{ zccl.DW || '-' }}</span>
                            </p>
                        </div>
                        <div class="zy0427-donghua2">
                            <img
                                src="./assets/images/donghua2_q1.png"
                                class="q1 floating-img"
                                alt=""
                            />
                            <img
                                src="./assets/images/donghua2_q2.png"
                                class="q2 floating-img"
                                alt=""
                            />
                            <img
                                src="./assets/images/donghua2_q3.png"
                                class="q3 floating-img"
                                alt=""
                            />
                            <img
                                src="./assets/images/donghua2_q4.png"
                                class="q4 floating-img"
                                alt=""
                            />
                            <img
                                src="./assets/images/donghua2_q5.png"
                                class="q5 floating-img"
                                alt=""
                            />
                            <img
                                src="./assets/images/donghua2_q6.png"
                                class="q6 floating-img"
                                alt=""
                            />
                        </div>
                    </div>
                    <div class="b4">
                        <svg class="zy0427-svg">
                            <image
                                href="./assets/images/svg_dot.png"
                                x="0"
                                y="-3"
                                width="20"
                                height="6"
                            >
                                <animateMotion
                                    path="M0,150 C0,150 59,164 106,152 "
                                    dur="3s"
                                    repeatCount="indefinite"
                                    rotate="auto"
                                ></animateMotion>
                                <animate
                                    attributeName="opacity"
                                    from="0"
                                    to="1"
                                    dur="3s"
                                    repeatCount="indefinite"
                                ></animate>
                            </image>
                            <image
                                href="./assets/images/svg_dot.png"
                                x="0"
                                y="-3"
                                width="20"
                                height="6"
                            >
                                <animateMotion
                                    path="M1,192 C2,195 53,192 106,188"
                                    dur="3s"
                                    repeatCount="indefinite"
                                    rotate="auto"
                                ></animateMotion>
                                <animate
                                    attributeName="opacity"
                                    from="0"
                                    to="1"
                                    dur="3s"
                                    repeatCount="indefinite"
                                ></animate>
                            </image>
                            <image
                                href="./assets/images/svg_dot.png"
                                x="0"
                                y="-3"
                                width="20"
                                height="6"
                            >
                                <animateMotion
                                    path="M1.5,242.5 C1.5,242.5 22,230 101.5,233"
                                    dur="3s"
                                    repeatCount="indefinite"
                                    rotate="auto"
                                ></animateMotion>
                                <animate
                                    attributeName="opacity"
                                    from="0"
                                    to="1"
                                    dur="3s"
                                    repeatCount="indefinite"
                                ></animate>
                            </image>
                        </svg>
                    </div>
                    <div class="b5">
                        <div class="zy0427-data2">
                            <p class="p1">支撑应用</p>
                            <p class="p2">{{ zcyys }}<span>个</span></p>
                        </div>
                        <div class="gap" style="height: 30px"></div>
                        <div class="zy0427-donghua3">
                            <p class="p1">秀水卫士</p>
                            <p class="p2">蓝天卫士</p>
                            <p class="p3">秀水卫士</p>
                            <p class="p4">蓝天卫士</p>
                        </div>
                    </div>
                </div>
                <h1 class="yy0825-celltit" style="position: absolute; bottom: 150px">
                    大脑产品（IRS）
                </h1>

                <div
                    class="yy0827-dnbox1"
                    style="cursor: pointer; bottom: 15px; height: 110px; border-radius: 7px"
                    @click="popShow = true"
                    :class="popShow ? 'yy0827-dnbox1_on' : ''"
                >
                    <i class="yy0825-tick" v-show="popShow"></i>
                    <ul class="flx1 ac jb list1">
                        <li>
                            <p class="p1">数据类</p>
                            <p class="p2">
                                <em>{{ data.sjl || '-' }}</em
                                >个
                            </p>
                        </li>
                        <li>
                            <p class="p1">组件类</p>
                            <p class="p2">
                                <em>{{ data.zjl || '-' }}</em
                                >个
                            </p>
                        </li>
                        <li>
                            <p class="p1">共享单位</p>
                            <p class="p2">
                                <em>{{ data.gxdw || '-' }}</em
                                >个
                            </p>
                        </li>
                        <li>
                            <p class="p1">共享服务</p>
                            <p class="p2">
                                <em>{{ data.gxfw || '-' }}</em
                                >项
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="borad-rp">
                <p class="zy0822-til1" style="position: relative">
                    数据应用
                    <i
                        class="yy0827-close"
                        style="position: absolute; right: 0; top: 0; cursor: pointer"
                        @click="close"
                    ></i>
                </p>
                <div class="gap" style="height: 12px"></div>

                <div class="zy0822-box1" style="height: 290px">
                    <div class="flx1 ac jb">
                        <div class="flx1 ac">
                            <p class="zy0822-til2">单位调用数据排名</p>
                            <!-- <i class="zy0822-arw"></i> -->
                        </div>
                        <p class="zy0822-txt1">单位：万次</p>
                    </div>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="txtMarquee-top1" style="height: 170px; overflow: hidden">
                        <vue3-seamless-scroll
                            hover-stop="true"
                            :list="dwdypmData"
                            :hover="true"
                            :step="0.2"
                            :limit-scroll-num="3"
                            :wheel="true"
                        >
                            <ul class="yy0427-flowbar">
                                <li v-for="(item, index) in dwdypmData" :key="index">
                                    <div class="flx1 ac jb">
                                        <span class="f1">{{ item.SSJGMC }}</span>
                                        <span class="f2">{{ item.DYCS }}</span>
                                    </div>
                                    <p class="bar">
                                        <b :style="{ width: item.bfb }"></b>
                                    </p>
                                </li>
                            </ul>
                        </vue3-seamless-scroll>
                    </div>
                    <div class="gap"></div>
                    <div class="zy0822-data2">
                        <p class="p1">闲置数据</p>
                        <p class="p2">{{ xzsjNum }}<em>项</em></p>
                    </div>
                </div>
                <div class="gap"></div>
                <div class="zy0822-box1" style="height: 224px">
                    <p class="zy0822-til2">接口保障</p>
                    <div class="gap" style="height: 20px"></div>
                    <ul class="zy0822-data3">
                        <li>
                            <p class="p1">接口成功率</p>
                            <p class="p2">{{ jkcglData.CGL || '-' }} <em>%</em></p>
                            <p class="p3">
                                <span class="s1">本月</span
                                ><span class="s2">{{ jkcglData.BYCGL || '-' }}%</span>
                            </p>
                            <p class="p3">
                                <span class="s1">同比</span
                                ><span class="s2 reduce"
                                    ><img src="./assets/images/yy-r-down.png" alt="" class="jt" />{{
                                        jkcglData.TBCGL || '-'
                                    }}%</span
                                >
                            </p>
                        </li>
                        <li>
                            <p class="p1">平均响应时间</p>
                            <p class="p2" style="color: #00e87e">{{ jkcglData.PJSC }}<em>S</em></p>
                            <p class="p3">
                                <span class="s1">本月</span
                                ><span class="s2">{{ jkcglData.BYPJSC }}s</span>
                            </p>
                            <p class="p3">
                                <span class="s1">同比</span
                                ><span class="s2 add"
                                    ><img src="./assets/images/yy-r-up.png" alt="" class="jt" />{{
                                        jkcglData.TBPJSC
                                    }}%</span
                                >
                            </p>
                        </li>
                        <li>
                            <p class="p1">预警数</p>
                            <p class="p2" style="color: #f54455">{{ yjsjData.YJS }}</p>
                            <p class="p3">
                                <span class="s1">闭环数</span
                                ><span class="s2" style="color: #00e87e">{{ yjsjData.BHS }}</span>
                            </p>
                            <p class="p3">
                                <span class="s1">处理中</span
                                ><span class="s2" style="color: #d8d80a">{{ yjsjData.CLZ }}</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="gap"></div>
                <div class="gap"></div>
                <p class="zy0822-til1">数据监理</p>
                <div class="gap" style="height: 12px"></div>
                <div class="zy0822-box1" style="height: 260px">
                    <ul class="zy0822-data4">
                        <li>
                            <p class="p1">清单总数</p>
                            <p class="p2">{{ sjjlData.NUM || '-' }}</p>
                        </li>
                        <li>
                            <p class="p1">办结率</p>
                            <p class="p2">{{ sjjlData.BJL || '-' }}<em>%</em></p>
                        </li>
                        <li>
                            <p class="p1">超期率</p>
                            <p class="p2" style="color: #f7ba20">
                                {{ sjjlData.CQL || '-' }}<em>%</em>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="yy0827-mod2" v-if="popShow">
            <div class="gap"></div>
            <div class="flx1 ac jb alert-hd">
                <p class="yy0825-alertit">大脑产品</p>
                <i class="yy0827-close" @click="popShow = false"></i>
            </div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="flx1 jb">
                <div class="yy0825-cell" style="flex: 1px; height: 728px; margin-right: 20px">
                    <h1 class="yy0825-celltit">数据类</h1>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="flx1 jb yy0827-datacell" style="height: 92px">
                        <div class="lfbox">
                            <p class="p1">总数</p>
                            <p class="p2">{{ dncpData.sjl.list.length }}</p>
                        </div>
                        <div class="rtbox">
                            <div class="flx1 ac jb">
                                <p class="f1">接口数据集</p>
                                <p class="f2">{{ dncpData.sjl.one }}</p>
                            </div>
                            <div class="flx1 ac jb" style="margin-top: 6px">
                                <p class="f1">批量数据集</p>
                                <p class="f2">{{ dncpData.sjl.two }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="yy-twrap1" style="height: calc(100% - 160px); overflow: hidden">
                        <table class="yy0827-table1">
                            <colgroup>
                                <col width="15%" />
                                <col width="" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th class="tal">目录名称</th>
                                    <th>被调用次数</th>
                                </tr>
                            </thead>
                        </table>
                        <div
                            class="txtMarquee-top1 hidden-scrollbar"
                            style="height: 490px; overflow-y: auto"
                        >
                            <table class="yy0827-table1">
                                <colgroup>
                                    <col width="15%" />
                                    <col width="" />
                                    <col width="30%" />
                                </colgroup>
                                <tbody>
                                    <tr v-for="(item, index) in dncpData.sjl.list" :key="index">
                                        <td>{{ index + 1 }}</td>
                                        <td class="tal">{{ item.biz_name }}</td>
                                        <td class="num">{{ item.qto_value }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="yy0825-cell" style="flex: 1px; height: 728px; margin-right: 20px">
                    <h1 class="yy0825-celltit">组件类</h1>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="flx1 jb yy0827-datacell" style="height: 92px">
                        <div class="lfbox">
                            <p class="p1">总数</p>
                            <p class="p2">{{ dncpData.zjl.list.length }}</p>
                        </div>
                        <div class="rtbox">
                            <div class="flx1 ac jb">
                                <p class="f1">接口</p>
                                <p class="f2">{{ dncpData.zjl.one }}</p>
                            </div>
                            <div class="flx1 ac jb" style="margin-top: 6px">
                                <p class="f1">工具</p>
                                <p class="f2">{{ dncpData.zjl.two }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="yy-twrap1" style="height: calc(100% - 160px); overflow: hidden">
                        <table class="yy0827-table1">
                            <colgroup>
                                <col width="15%" />
                                <col width="" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th class="tal">目录名称</th>
                                    <th>数量</th>
                                </tr>
                            </thead>
                        </table>
                        <div
                            class="txtMarquee-top1 hidden-scrollbar"
                            style="height: 490px; overflow-y: auto"
                        >
                            <table class="yy0827-table1">
                                <colgroup>
                                    <col width="15%" />
                                    <col width="" />
                                    <col width="30%" />
                                </colgroup>
                                <tbody>
                                    <tr v-for="(item, index) in dncpData.zjl.list" :key="index">
                                        <td>{{ index + 1 }}</td>
                                        <td class="tal">{{ item.biz_name }}</td>
                                        <td class="num">{{ item.qto_value }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="yy0825-cell" style="flex: 1px; height: 728px">
                    <h1 class="yy0825-celltit">共享服务</h1>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="flx1 jb yy0827-datacell" style="height: 92px">
                        <div class="lfbox">
                            <p class="p1">总数</p>
                            <p class="p2">{{ dncpData.gxfw.list.length }}</p>
                        </div>
                        <div class="rtbox">
                            <div class="flx1 ac jb">
                                <p class="f1">市级部门</p>
                                <p class="f2">{{ dncpData.gxfw.one }}</p>
                            </div>
                            <div class="flx1 ac jb" style="margin-top: 6px">
                                <p class="f1">区级部门</p>
                                <p class="f2">{{ dncpData.gxfw.two }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="yy-twrap1" style="height: calc(100% - 160px); overflow: hidden">
                        <table class="yy0827-table1">
                            <colgroup>
                                <col width="15%" />
                                <col width="" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th class="tal">目录名称</th>
                                    <th>申请数量</th>
                                </tr>
                            </thead>
                        </table>
                        <div
                            class="txtMarquee-top1 hidden-scrollbar"
                            style="height: 490px; overflow-y: auto"
                        >
                            <table class="yy0827-table1">
                                <colgroup>
                                    <col width="15%" />
                                    <col width="" />
                                    <col width="30%" />
                                </colgroup>
                                <tbody>
                                    <tr v-for="(item, index) in dncpData.gxfw.list" :key="index">
                                        <td>{{ index + 1 }}</td>
                                        <td class="tal">{{ item.biz_name }}</td>
                                        <td class="num">{{ item.qto_value }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from '@/api/request'
import { forEach } from 'lodash-es'
export default {
    name: 'NumSmallHelpMin',
    data() {
        return {
            show: false,
            jrxz: 0, // 今日新增
            jrgx: 0, // 今日共享
            sjly: 0, // 数据来源数量
            zcyys: 0, // 支撑应用数量
            zccl: {
                ZCCL: 0, // 数据存储量
                DW: 0,
            }, // 数据存储量对象
            yjczData: {}, // 预警处置数据
            // 采集监控数据
            cjjkData: {
                iotDeviceOnline: {
                    // 物联感知设备在线情况
                    rate: '0', // 物联感知设备在线率
                    totalMonitoring: 0, // 监测总数
                    onlineCount: 0, // 在线数
                },
                businessDataStorage: {
                    // 业务数据存储情况
                    normalStorageRate: '0', // 业务数据正常入库率
                    totalAccess: 0, // 接入总数
                    normalAccessCount: 0, // 正常接入数
                },
            },
            sjzlpffb: {
                averageScore: 0, // 数据质量平均分
                scoreRanges: [], // 评分分布区间
            },
            // 单位调用排名数据
            dwdypmData: [],
            // 数据使用排名数据
            sjsypmData: [],
            // 闲置数据数量
            xzsjNum: 0,
            // 接口成功率等数据
            jkcglData: {},
            // 预警数据
            yjsjData: {},
            sjjlData: { BJL: 0, NUM: 0, LIST: [], CQL: 0 },
            popShow: false,
            data: {
                sthjgj: 0,
                sjbmgj: 0,
                sjl: 0,
                zjl: 0,
                gxdw: 0,
                gxfw: 0,
            },
            dncpData: {
                sjl: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
                zjl: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
                gxfw: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
            },
        }
    },
    created() {
        window.NumSmallHelpMin = {
            // 打开面板
            open: this.open,
            close: this.close,
            isOpen: false, // 开启和关闭的状态，默认关闭
        }
    },
    mounted() {},
    methods: {
        // 打开面板
        open() {
            window.NumSmallHelpMin.isOpen = true
            this.show = true
            this.$nextTick(() => {
                this.setinsertCurrentLoginUser()
                this.getCenter()
                this.getLeft()
                this.getRight()
                this.getSjzl()
                this.getDncp()
            })
        },
        // 关闭面板
        close() {
            window.NumSmallHelpMin.isOpen = false
            this.show = false
        },
        // 增加用户访问记录
        setinsertCurrentLoginUser() {
            // 调用接口 告知后台用户访问了这个页面
            axios({
                url: '/szhgg/dp/bigScreenController/insertCurrentLoginUser/SY',
                method: 'post',
            }).then(res => {})
        },
        getCenter() {
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/sjzl',
                method: 'get',
            }).then(res => {
                $('#devNum1').rollNum({
                    deVal: (res.data[0].SJZL / 10000).toFixed(0).toString(),
                })
            })

            // 获取今日新增
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/jrxz',
                method: 'get',
            }).then(res => {
                this.jrxz = res.data.JRXZ
            })

            // 获取今日共享
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/jrgx',
                method: 'get',
            }).then(res => {
                this.jrgx = res.data[0].VALUE
            })

            // 获取数据来源数量
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/sjly',
                method: 'get',
            }).then(res => {
                this.sjly = res.data[0].NUM
            })

            // 获取支撑应用数量
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/zcyys',
                method: 'get',
            }).then(res => {
                this.zcyys = res.data[0].NUM
            })

            // 获取数据存储量
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/zccl',
                method: 'get',
            }).then(res => {
                this.zccl = res.data[0]
            })
        },
        getLeft() {
            // 获取采集监控数据
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjcj/getCJSJ',
                method: 'get',
            }).then(res => {
                this.cjjkData = res.data
                console.log(this.cjjkData)
            })

            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjcj/getYjcz',
                methods: 'get',
            }).then(res => {
                this.yjczData = res.data
                this.getCzlEcharts() // 渲染处置率仪表盘
            })

            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjcj/sjzlpffb',
                method: 'get',
            }).then(res => {
                this.sjzlpffb = res.data
                // 处理分布数据格式
                forEach(this.sjzlpffb.scoreRanges, item => {
                    item.value = Number(item.count)
                    item.name = item.range
                })
                this.getSjzlpffbEcharts() // 渲染评分分布饼图
            })
        },
        getRight() {
            // 获取单位调用排名
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/dwdypm',
                method: 'get',
            }).then(res => {
                this.dwdypmData = res.data
                // 计算百分比宽度
                forEach(this.dwdypmData, item => {
                    item.bfb = (item.DYCS / this.dwdypmData[0].DYCS) * 100 + '%'
                })
            })

            // 获取数据使用排名
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/sjsypm',
                method: 'get',
            }).then(res => {
                this.sjsypmData = res.data.sort((a, b) => b.CS_DY - a.CS_DY)
                // 计算百分比宽度
                forEach(this.sjsypmData, item => {
                    item.bfb = (item.CS_DY / this.sjsypmData[0].CS_DY) * 100 + '%'
                })
            })

            // 获取闲置数据数量

            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/xzsj',
                method: 'get',
            }).then(res => {
                this.xzsjNum = res.data.NUM
            })

            // 获取接口成功率等数据

            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/jkcgl',
                method: 'get',
            }).then(res => {
                this.jkcglData = res.data
            })

            // 获取预警数据

            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/yjs',
                method: 'get',
            }).then(res => {
                this.yjsjData = res.data[0]
            })

            // 获取数据监理分部门统计（此处仅打印数据）

            axios({
                url: '/out/bwapp/dataservice/sjcl/api/sxz/sjyy/sjjlfqbmtj',
                method: 'get',
            }).then(res => {
                this.sjjlData = res.data
            })
        },

        getSjzl() {
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/20040/zyml/data_assets',
                method: 'get',
            }).then(res => {
                this.data.sthjgj = res.data.ev_data_info[0].ev_dept
                this.data.sjbmgj = res.data.ev_data_info[0].adj_dept
                this.data.sjl = res.data.ev_product[0].data_directory
                this.data.zjl = res.data.ev_product[0].data_assembly
                this.data.gxdw = res.data.ev_product[0].apply_dept
                this.data.gxfw = res.data.ev_product[0].apply
            })
        },
        getDncp() {
            this.dncpData = {
                sjl: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
                zjl: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
                gxfw: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
            }
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/20040/zyml/ev_product_info',
                method: 'get',
            }).then(res => {
                res.data.ev_product_quota.forEach(e => {
                    if (e.qto_type == '数据类') {
                        if (e.qto_name == '接口数据集') {
                            this.dncpData.sjl.one = e.qto_value
                        }
                        if (e.qto_name == '批量数据集') {
                            this.dncpData.sjl.two = e.qto_value
                        }
                    } else if (e.qto_type == '组件类') {
                        if (e.qto_name == '接口') {
                            this.dncpData.zjl.one = e.qto_value
                        }
                        if (e.qto_name == '工具') {
                            this.dncpData.zjl.two = e.qto_value
                        }
                    } else if (e.qto_type == '共享服务') {
                        if (e.qto_name == '市级部门') {
                            this.dncpData.gxfw.one = e.qto_value
                        }
                        if (e.qto_name == '区级部门') {
                            this.dncpData.gxfw.two = e.qto_value
                        }
                    }
                })

                res.data.ev_product_quota_list.forEach(e => {
                    if (e.qto_type == '数据类') {
                        this.dncpData.sjl.list.push(e)
                    }
                    if (e.qto_type == '组件类') {
                        this.dncpData.zjl.list.push(e)
                    }
                    if (e.qto_type == '共享服务') {
                        this.dncpData.gxfw.list.push(e)
                    }
                })

                this.dncpData.sjl.list.sort((a, b) => {
                    return b.qto_value - a.qto_value
                })
                this.dncpData.zjl.list.sort((a, b) => {
                    return b.qto_value - a.qto_value
                })
                this.dncpData.gxfw.list.sort((a, b) => {
                    return b.qto_value - a.qto_value
                })
            })
        },
        // 渲染处置率仪表盘
        getCzlEcharts() {
            let myChart = echarts.init(document.getElementById('czl'))
            let option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 100,
                        radius: '100%', // 调整仪表盘半径大小
                        center: ['50%', '60%'], // 调整仪表盘中心位置
                        // splitNumber: 12,
                        itemStyle: {
                            color: '#00e87e',
                            shadowColor: '#00e87e',
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2,
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 12,
                        },

                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 12,
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: function (value) {
                                return '{title|处置率}{value|' + value.toFixed(0) + '}{unit|%}'
                            },
                            rich: {
                                value: {
                                    fontSize: 30,
                                    fontWeight: 'bolder',
                                    color: '#00e87e',
                                },
                                unit: {
                                    fontSize: 18,
                                    color: '#00e87e',
                                    padding: [0, 0, 0, 10],
                                },
                                title: {
                                    fontSize: 18,
                                    color: '#00e87e',
                                    padding: [0, 10, 0, 0],
                                },
                            },
                        },
                        data: [
                            {
                                value: Number(this.yjczData.disposalRate),
                            },
                        ],
                    },
                ],
            }
            myChart.setOption(option)
        },
        // 渲染数据质量评分分布饼图
        getSjzlpffbEcharts() {
            let myChart = echarts.init(document.getElementById('sjzlpffb'))
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)',
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 0,
                    top: 'center', // 垂直居中
                    itemGap: 45, // 设置图例项之间的间距
                    textStyle: {
                        color: '#ffffff', // 设置文字颜色为白色
                        fontSize: 16,
                    },
                    formatter: function (name) {
                        // 获取series中的数据
                        let data = option.series[0].data
                        let value = 0
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].name === name) {
                                value = data[i].value
                                break
                            }
                        }
                        return name + ' ' + value + '个'
                    },
                },
                series: [
                    {
                        name: '姓名',
                        type: 'pie',
                        radius: '55%',
                        center: ['25%', '50%'],
                        radius: ['55%', '80%'],
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.sjzlpffb.scoreRanges,
                        color: ['#01FE85', '#E8B021', '#ED5D5D'],
                    },
                ],
            }

            myChart.setOption(option)
        },
    },
}
</script>
<style scoped>
@import './assets/css/reset.css';
@import './assets/css/zy0822.css';
@import './assets/css/my0825.css';
@import './assets/css/my0827.css';
.yy0427-dzbg1 {
    width: 141px;
    height: 118px;
    background: url(./assets/images/yy0427-dzbg1.png) no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.yy0427-dzbg1 .p1 {
    font-size: 18px;
    color: #01fe85;
    font-family: 'Oswald';
    margin-bottom: 20px;
}

.yy0427-dzbg1 .p1 em {
    font-size: 32px;
}
</style>
<style>
.dataNums {
    height: 98px;
    display: flex;
}

.dataNums .dataOne {
    width: 80px;
    height: 98px;
    margin: 0px 6px;
    text-align: center;
    background: url(./assets/images/scroll_num_bg.png) no-repeat center center;
    background-size: 100% 100%;
}

.dataNums .dataBoc {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.dataNums .dataBoc .tt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Oswald';
    font-weight: 500;
    font-size: 56px;
    color: #ffffff;
}

.dataNums .dataBoc .tt span {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 56px;
    line-height: 98px;
    color: #fff;
}

.dataNums .dataLine {
    width: 15px;
    background: none;
}

.dataNums .dataLine .dataBoc .tt {
    font-size: 30px;
    line-height: 130px;
    transition: none !important;
}
.yy0827-dnbox1_on {
    background: rgba(0, 73, 65, 0.7) !important;
    border: 1px solid #00e87e !important;
}
.yy0827-mod2 {
    position: absolute !important;
    top: 40px;
    left: 149px;
}
/* 隐藏 Firefox 的滚动条 */
.hidden-scrollbar {
    scrollbar-width: none;
}
.yy0827-jcfbox1 {
    font-size: 16px;
}
</style>
